<template>
  <div class="con">
    <Comheader :isTrue="false">
      <h1 style="color: #f5f5f5">个人中心</h1>
    </Comheader>

    <el-container>
      <div class="card">
        <div class="navleft">
          <h2>个人中心</h2>
          <ul>
            <li>
              <div
                @click="getUserNav(0)"
                :class="['item', activeIndex == 0 ? 'active' : '']"
              >
                <i class="iconfont icon-home"></i>
                <span>首页</span>
              </div>
            </li>
            <li>
              <div
                @click="getUserNav(1)"
                tag="div"
                :class="['item', activeIndex == 1 ? 'active' : '']"
              >
                <i class="iconfont icon-lujing"></i>
                <span>我的头像</span>
              </div>
            </li>
            <li>
              <div
                @click="getUserNav(2)"
                tag="div"
                :class="['item', activeIndex == 2 ? 'active' : '']"
              >
                <i class="iconfont icon-upload"></i>
                <span>上传成绩</span>
              </div>
            </li>
            <li>
              <div
                @click="getUserNav(4)"
                tag="div"
                :class="['item', activeIndex == 4 ? 'active' : '']"
              >
                <i class="iconfont icon-upload"></i>
                <span>上传试题</span>
              </div>
            </li>

            <li>
              <div
                @click="getUserNav(3)"
                tag="div"
                :class="['item', activeIndex == 3 ? 'active' : '']"
              >
                <i class="el-icon-setting"></i>
                <span>用户设置</span>
              </div>
            </li>
            <li @click="outLogin">
              <div class="item" style="font-weight: 550">
                <i
                  class="iconfont icon-dingbudaohang-zhangh"
                  style="font-size: 20px"
                ></i>
                <span>退出</span>
              </div>
            </li>
          </ul>
        </div>
        <div class="navmain">
          <router-view></router-view>
        </div>
      </div>
    </el-container>
  </div>
</template>


<script>
import Comheader from "@/components/common/Comheader.vue";
export default {
  data() {
    return {
      user: {},
      activeIndex: 0,
    };
  },
  created() {
    let user = window.sessionStorage.getItem("user");
    // console.log(user)
    this.user = JSON.parse(user);

    //初始化轻音乐的播放
    this.$store.commit("setShowData", this.user.user_music_isplay);
  },
  components: {
    Comheader,
  },

  methods: {
    //左侧导航切换
    getUserNav(e) {
      // console.log(e);
      this.activeIndex = e;

      switch (e) {
        case 0:
          this.$router.push("/user");
          break;
        case 1:
          this.$router.push("/user/userheader");
          break;
        case 2:
          this.$router.push("/user/upgard");
          break;
        case 3:
          this.$router.push("/user/setting");
          break;
        case 4:
          this.$router.push("/user/newTest");
          break;
      }
    },
    //退出
    outLogin() {
      this.$store.commit("setShowData", false);
      window.sessionStorage.clear();
      this.$message.success("退出登录成功");
      this.$router.push("/");
    },

    fh() {
      this.$router.push("/home/index");
    },
    getUserData() {},
  },
};
</script>

<style scoped lang="less">
@Color: #409eff;
.active {
  background-color: #00a1d7;
  color: #f5f5f5;
}
.el-container {
  min-height: calc(100vh - 90px);
}
.outline {
  position: absolute;
  right: 50px;
  top: 25px;
  // width: 30px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  i {
    font-size: 30px;
    &:hover {
      color: @Color;
    }
  }
}
.el-header {
  height: 80px !important;
  background-color: #ccc;
  line-height: 80px;
  padding-left: 30px;
  position: relative;
  h1 {
    text-align: center;
    color: @Color;
  }
}

.fh {
  color: #555;
  font-weight: 550;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translate(0, -50%);
}

.card {
  border-radius: 5px;
  margin: 30px auto;
  width: 1000px;
  height: 100%;
  min-height: 500px;
  border: 0.5px solid #ccc;
  box-shadow: 0 0 2px #ccc;
  display: flex;
  background-color: rgba(0, 0, 0, 0.3);
  .navleft {
    width: 150px;
    border-right: 0.5px solid #ccc;
    h2 {
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #898989;
      font-size: 16px;
      font-weight: 500;
    }
    ul {
      cursor: pointer;
      li {
        height: 50px;
        &:hover {
          background-color: #f1f1f1;
          color: #888;
        }

        .item {
          display: flex;
          align-items: center;
          i {
            padding-left: 10px;
            flex: 5;
            text-align: center;
            color: #898989;
            font-size: 16px;
            line-height: 50px;
          }
          span {
            flex: 9;
            font-size: 14px;
            line-height: 50px;
          }
        }
      }
    }
  }
  .navmain {
    flex: 1;
    padding-bottom: 25px;
  }
}
</style>